<template>
    <div class="wrap">
        
        <!-- 信息介绍123123123 -->
        <div class=" flex detail-wrap">
            
            <div class="shadow-box">
                <div class="detail-box flex">
                    <router-link class="img" :to="{name:'play'}">
                          <el-image
                            class="img"
                            :src="data.preImg"
                            fit="cover"></el-image>
                        <!-- <img :src="data.preImg" alt=""> -->
                    </router-link>
                    <div class="right-info tl">
                        <ul class="flex">
                            <li class="name">
                                <router-link to="#">
                                     {{data.name}}
                                </router-link>
                                <span>{{new Date(data.created_at).getFullYear()}}</span>
                            </li>
                             <li> 
                                别名: {{data.commendInfo}}
                            </li>
                            <li>
                                声音特点： {{data.sixList[0]}}
                            </li>
                             <li>
                                年龄类型： {{data.hallmarks[0]}}
                            </li>
                            <li>
                                时间:  {{new Date(data.created_at).toLocaleDateString()}}
                            </li>
                            <li>
                                类型:  
                                <router-link to="/channel">
                                    <el-tag type="success">
                                {{data.tags[0].name}}
                                </el-tag></router-link>
                            </li>
                           
                            <li>
                                语言: {{data.language}}
                            </li>
                        </ul>
                        <p class="des more-colon">
                            <span>简介:</span>
                               {{data.des}}
                            </p>
                            <router-link class="go-play tc" :to="{path:'/play',query:{data:JSON.stringify(data)}}">立即播放</router-link>
                    </div>
                </div> 

            </div>
        </div>
         <!-- 播放地址 -->
        <div class="flex detail-flex">
            <div class="shadow-box tl add-box" >
                <div class="rec-con">
                    <span>播放列表</span>
                    <hr>
                     <div class="link-box tc flex">
                        <router-link :to="{name:'play',query:{data:JSON.stringify(data)}}" v-for="i in 15" :key="i">
                            {{i}} 
                        </router-link>
                    </div>
                </div>      

            </div>
            <div class="rec-side tl">
                <div class="shadow-box ">
                    <span>演职员表</span>
                    <hr>
                </div>
                <div class="direct-list flex">
                    <router-link class="box tc" :to="{name:'member',query:{id:i._id}}" v-for="i in data.roles" :key="i">
                     <!-- <div class="box tc" v-for="i in data.roles" :key="i" > -->
                        <el-image
                            class="img"
                            :src="i.nameImgs[0]?i.nameImgs[0].url:i.introImgs[0].url"
                            fit="cover"></el-image>
                         <p class="main">
                             {{i.name}} 
                         </p>
                         <p class="sub">
                             {{i.des}} {{i.status?'':'(已下线)'}}
                         </p>
                     <!-- </div> -->
                    </router-link>
                </div>
               
                
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
// 具体信息介绍
.shadow-box {
  width: 100%;
  padding: 20px;
}
.detail-wrap {
  margin-top: 70px;
  .detail-box {
    justify-content: flex-start;
    .img {
      width: 200px;
      height: 300px;
      background: #000;
    }
    .right-info {
      position: relative;
      margin-left: 20px;
      min-height: 300px;
      color: #999;
      flex: 1;
      ul {
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
      }
      .name {
        width: 100%;
        margin-bottom: 27px;
        font-size: 24px;
        color: #2fb3ff;
        margin-bottom: 27px;
        span {
          margin-left: 10px;
          font-size: 20px;
          color: #999;
        }
      }
      li {
        margin-bottom: 5px;
        width: 33%;
      }

      .des {
        span {
        }
        .overshow {
          overflow: visible;
        }
      }
      .go-play {
        position: absolute;
        bottom: 0;
        display: block;
        width: 108px;
        height: 40px;
        line-height: 40px;
        background: #2fb3ff;
        color: #fff;
        &:hover {
          background: #59c2ff;
        }
      }
    }
  }
}
.detail-flex {
  align-items: flex-start;
  // 播放地址
  .add-box {
    width: 860px;
    .link-box {
      justify-content: flex-start;
      flex-wrap: wrap;
      a {
        display: block;
        width: 77px;
        height: 45px;
        line-height: 45px;
        font-size: 18px;
        background: #f7f7fc;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
  .rec-side {
    .shadow-box {
      box-shadow: none;
    }
  }
  // 演职员表
  .direct-list {
    padding-left: 20px;
    font-size: 12px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    background: #fff;
    .box {
      margin-bottom: 15px;
      margin-right: 20px;
      width: 80px;
    }
    .img {
      width: 80px;
      height: 80px;
      background: #000;
    }
    .main {
      color: #333;
    }
    .sub {
      color: #999;
    }
  }
}
</style>
<script>
import {search} from '../api/index'
export default {
  data() {
    return {
      data: ""
    };
  },
  methods: {
    changePage() {
        console.log(this.$route.query.name)
        search({
            name:this.$route.query.name,
            page: this.curPage-1,
            pageSize: 5,
            tagId: '',
        }).then(res=>{
            this.data=res.data.data[0];
            this.total=res.data.total;
            console.log(this.listData)
        }).catch(err=>{
            console.log(err)
        });
        },
  },
  mounted() {},
  created() {
      this.changePage();
  }
};
</script>
